<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>设置</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            body{
                margin: 0;
                overflow: hidden;
                background-image: url(img/timg1.jpg);
                background-size: 100% 105%;
            }
            #container{
                padding: 100px 50px;
            }
            #title{
                height: 50px;
                background-image: url("./images/Title.png");
                background-size: 100% 100%;
                line-height: 45px;
                text-align: center;
                color: black;
                font-size: 25px;
                font-weight: bold;
                margin-bottom: 50px;
            }
            .sel-item{
                margin: 50px 20px;
            }
            #start{
                text-align: center;
            }
            #start button{
                width: 200px;
                height: 60px;
                background-image: ;
                background-size: 100% 100%;
                border: none;
                background-color: transparent;
                color: white;
                font-size: 20px;
                margin-top: 100px;
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <!-- 标题 -->
            <div id="title">设置</div>
            <!-- 选择音乐 -->
            <div class="sel-item">
                <label for="music">音乐选择：</label>
                <select id="music"></select>
            </div>
            <!-- 难易程度 -->
            <div class="sel-item">
                <label for="diffi">难易程度：</label>
                <select id="diffi">
                    <option value="1">1列</option>
                    <option value="2">2列</option>
                    <option value="4">4列</option>
                    <option value="6">6列</option>
                    <option value="8">8列</option>
                </select>
            </div>
            <!-- 速率选择 -->
            <div class="sel-item">
                <label for="speed">速率选择：</label>
                <select id="speed">
                    <option value="50">慢</option>
                    <option value="40">中</option>
                    <option value="30">快</option>
                </select>
            </div>
            <!-- 开始游戏 -->
            <div id="start">
                <button>开始游戏</button>
            </div>
        </div>
        <a href="节奏大师.html" style="color: green;">返回登录页面</a>
    </body>
    <script>
        // 布局界面
        var musics = ["达拉崩吧", "黎明前的黑暗", "芒种", "无价之姐", "野狼Disco", "雨中泪", "Faded"];
        musics.forEach(function(ele,index){
            var opt = document.createElement("option");
            opt.textContent = ele;
            opt.value = index;
            document.getElementById("music").appendChild(opt);
        });

        // 玩家如果不选择，那么默认选择是：
        // 歌曲
        var musicIndex = 0;
        // 难以程度
        var diffi = 1;
        // 速率
        var speed = 80;

        
        // 选择音乐
        document.getElementById("music").onchange = function(){
            musicIndex = this.value;
        }
        // 选择难以程度
        document.getElementById("diffi").onchange = function () {
            diffi = this.value;
        }
        // 选择速率
        document.getElementById("speed").onchange = function () {
            speed = this.value;
        }


        // 开始游戏
        document.querySelector("#start button").onclick = function () {
            // 存储
            localStorage.setItem("music", musics[musicIndex]);
            localStorage.setItem("diffi", diffi);
            localStorage.setItem("speed", speed);
            // 跳到游戏
            location.href = "游戏开始.html";
        }
    </script>
</html>